<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      #canvas {
          background: #f1f1f1;
      }
  </style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
    window.onload = () => {
        const canvas = document.getElementById('canvas')
        const ctx = canvas.getContext('2d')
        function draw() {
            var ctx = document.getElementById('canvas').getContext('2d');
            ctx.fillRect(0,0,150,150);
            // 改变原点
            ctx.translate(75,75);

            // 创建一个圆形的剪切路径
            ctx.beginPath();
            ctx.arc(0,0,60,0,Math.PI*2,true);
            ctx.clip();
            // 裁切路径创建之后所有出现在它里面的东西才会画出来。在画线性渐变时我们就会注意到这点。

            // draw background
            var lingrad = ctx.createLinearGradient(0,-75,0,75);
            lingrad.addColorStop(0, '#232256');
            lingrad.addColorStop(1, '#143778');

            // 又画了一个矩形，但这个矩形只能展示圆形区域，其他的区域被裁剪掉了
            ctx.fillStyle = lingrad;
            ctx.fillRect(-75,-75,150,150);

            // 然后会绘制出50 颗随机位置分布（经过缩放）的星星，当然也只有在裁切路径里面的星星才会绘制出来。
            for (var j=1;j<50;j++){
                ctx.save();
                ctx.fillStyle = '#fff';
                ctx.translate(75-Math.floor(Math.random()*150),
                    75-Math.floor(Math.random()*150));
                drawStar(ctx,Math.floor(Math.random()*4)+2);
                ctx.restore();
            }

        }
        function drawStar(ctx,r){
            ctx.save();
            ctx.beginPath()
            ctx.moveTo(r,0);
            for (var i=0;i<9;i++){
                ctx.rotate(Math.PI/5);
                if(i%2 == 0) {
                    ctx.lineTo((r/0.525731)*0.200811,0);
                } else {
                    ctx.lineTo(r,0);
                }
            }
            ctx.closePath();
            ctx.fill();
            ctx.restore();
        }

        draw()

    }

</script>
</body>
</html>
